<script lang="tsx" setup>
/**
 * 表单详情
 */
import {defineDialogSheetForm, DialogSheetForm} from "../../../../../../../../index.ts"
import {nextTick, ref} from "vue"

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
}>()

/**
 * 页面实例
 */
const dialogSheetFormModelRef = ref()
const form = defineDialogSheetForm<any>({
  title: "表单详情",
  width: 500,
  sheetForm: {
    labelWidth: "100px",
    els: [
      {
        label: "组件名",
        eType: "el-input",
        prop: "eType",
        props: {
          placeholder: "eType",
          clearable: true
        }
      },
      {
        label: "名称",
        eType: "el-input",
        prop: "label",
        props: {
          placeholder: "菜单名称",
          clearable: true
        }
      },
      {
        label: "key值",
        eType: "el-input",
        prop: "prop",
        props: {
          placeholder: "prop"
        }
      },
      {
        label: "类型",
        eType: "el-input",
        prop: "props",
        props: {
          placeholder: "props",
          type: "textarea"
        }
      },
      {
        label: "事件",
        eType: "el-input",
        prop: "events",
        props: {
          placeholder: "events",
          type: "textarea"
        }
      },
      {
        label: "样式",
        eType: "el-input",
        prop: "style",
        props: {
          placeholder: "style",
          type: "textarea"
        }
      }
    ]
  }
})

/**
 * 显示
 */
const index = ref()
const show = (params: any) => {
  index.value = params.index
  nextTick(() => {
    dialogSheetFormModelRef.value.editForm()
    nextTick(() => {
      dialogSheetFormModelRef.value.setFormData(params.data)
    })
  })
}

/**
 * 提交
 */
const handleSubmit = async (data: any) => {
  emit("change", {
    data: data,
    index: index.value
  })
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogSheetForm ref="dialogSheetFormModelRef" :dialogSheetFormModel="form" @submit="handleSubmit"/>
</template>

<style lang="scss" scoped>

</style>